<template>
  <div class="container mine">
    <div :class="isHidden?'isHidden':''">
      <div class="mine-personal"  v-if="userType == '0'">
        <div class=" mine-personal-main" >
          <div class="flex">
            <div class="main-left flex-1">
              <img src="../../assets/V_03.jpg" alt="" width="100%">
              <div class="card-type">贵 宾 卡</div>
            </div>
            <div class="main-right text-right">
              <img class="company-logo" src="../../assets/V_07.jpg" alt="" width="100%">
              <!-- <div style="text-align:right;font-weight:normal"><van-button type="default" class="loginout" size="small" @click="logout">退出登录</van-button></div> -->
            </div>
          </div>
          <div class="flex user-info" >
            <div class="main-left flex-1">
              <div class="flex">
                <div class="user-pic-div">
                  <img class="user-pic" :src="HeadUrl" alt="">
                </div>
                <div class="user-info-row">
                  <div class="user-number">{{UserNumber}}</div>
                  <div class="user-name">{{name}}</div>
                  <div class="user-integral"><span class="sorce">{{integral}}</span> 积分</div>
                </div>
              </div>
            </div>
            <!-- <div class="main-right text-right">
              <img class="company-logo" src="../../assets/V_07.jpg" alt="" width="100%">
            </div> -->
          </div>
        </div>
      </div>
      <div class="user-menu" v-if="userType=='0'">
        <div class="flex" style="flex-wrap: wrap;">
          <div class="mune-item" @click="toPage('myInfo')">
            <div class="flex align-center">
              <div class="menu-icon my-info"></div>
              <div class="menu-name">我的信息</div>
            </div>
          </div>
          <!-- <div class="mune-item" @click="toPage('myInfo')">
            <div class="flex align-center">
              <div class="menu-icon password"></div>
              <div class="menu-name">修改密码</div>
            </div>
          </div> -->
          <div class="mune-item" @click="toPage('coupon')">
            <div class="flex align-center">
              <div class="menu-icon mall-coupon"></div>
              <div class="menu-name">商场优惠券</div>
            </div>
          </div>
          <div class="mune-item" @click="toPage('couponShop')">
            <div class="flex align-center">
              <div class="menu-icon shop-coupon"></div>
              <div class="menu-name">店铺优惠券</div>
            </div>
          </div>
          <div class="mune-item" @click="toPage('integralMange')">
            <div class="flex align-center">
              <div class="menu-icon jfhs"></div>
              <div class="menu-name">积分管理</div>
            </div>
          </div>
          <!-- <div class="mune-item" @click="toPage('applyIntegralList')">
            <div class="flex align-center">
              <div class="menu-icon jfhs"></div>
              <div class="menu-name">积分核算</div>
            </div>
          </div>
          <div class="mune-item" @click="toPage('integral')">
            <div class="flex align-center">
              <div class="menu-icon jfjl"></div>
              <div class="menu-name">积分记录</div>
            </div>
          </div> -->
          <div class="mune-item" @click="toPage('focusShop')">
            <div class="flex align-center">
              <div class="menu-icon focus-shop"></div>
              <div class="menu-name">关注的店铺</div>
            </div>
          </div>
          <div class="mune-item" @click="toPage('memberNotice')">
            <div class="flex align-center">
              <div class="menu-icon jfjl"></div>
              <div class="menu-name">会员须知</div>
            </div>
          </div>
        </div>
      </div>
      <div class="mine-personal" v-if="userType == '1'" style="background-image:none;">
        <div class="mine-com-main flex" >
          <div class="img-row">
            <img class="user-pic" :src="HeadUrl" alt="">
          </div>
          <div class="flex-1" >
            <div class="user-phone flex">
              <div class="flex-1">{{companyUserInfo.UserName}}</div>
              <div style="width:100px;text-align:right;font-weight:normal"><van-button type="default" size="small" @click="logout">退出登录</van-button></div>
            </div>
            <!-- <div class="user-sorce">{{companyUserInfo.ShopType}}</div>
            <div class="user-address"><van-icon name="location-o" /> {{companyUserInfo.Floor}}F/{{companyUserInfo.Address}}</div> -->
          </div>
        </div>
      </div>
      <div class="mine-list" v-if="userType=='1'">
        <van-cell title="我的信息" is-link @click="toPage('myShopInfo')"/>
        <van-cell title="修改密码" is-link @click="toPage('updatePassword')"/>
        <van-cell title="账单列表" is-link @click="toPage('shopBill')"/>
        <!-- <van-cell title="查找店铺" is-link @click="toPage('shop')"/> -->
      </div>
    </div>
  </div>
</template>

<script>
import userimg from '@/assets/logo.jpg'
export default {
  name: 'mine',
  data() {
    return {
      isHidden:true,
      UserNumber:'',
      name:'',
      integral:'',
      HeadUrl:'',
      code:'',
      OpenId:'',
      userType:'',
      companyUserInfo:'',
    }
  },
  mounted() {
   // console.log(window.location);
    let userType = this.getUrlParam('state'); //用户微信登录 用户标识
    if(userType && userType == 'userType0'){
      this.userType = 0; // 用户 
      this.user()
      document.title = '用户信息';
      this.isHidden = false;
    }else{
      console.log('商户')
      this.userType = 1;
      this.companyUser();
      document.title = '店铺信息';
     
    }
    return false;

  },
  methods: {
    user(){
      let userType = localStorage.getItem("userType");
      let authorization = localStorage.getItem("authorization");
      if(userType == '0' && authorization){
        localStorage.setItem('userType', 0);
        this.getUserInfo();
      }else{
        document.title = '用户信息';
        this.code = this.getUrlParam('code');
        localStorage.setItem('userType',0);
        if(sessionStorage.getItem('code') != 'used'){
          this.getWeiXinUserInfo();
        }else{
          this.getUserInfo();
        }
      }
    },
    companyUser(){
      document.title = '店铺信息';
      
      let userType = localStorage.getItem("userType");
      let authorization = localStorage.getItem("authorization");
      let isFirst = localStorage.getItem("isFirst");

      if(userType == '1' && authorization){
        this.getCompanyUserInfo();
        localStorage.setItem('userType',1);
        localStorage.setItem("isFirst",false);
      }else{
        this.code = this.getUrlParam('code');
        localStorage.setItem('userType',1);
        if(sessionStorage.getItem('code') == 'used' && isFirst == 'false'){
          this.getCompanyUserInfo();
        }else{
          this.getComWeiXinInfo();
          localStorage.setItem("isFirst",false);
        }
      }
    },
    toPage(url){
      this.$router.push({name: url})
    },
    getUserInfo(){
      let data = {}
      if(this.OpenId){
        data.OpenId = this.OpenId;
      }else{
         data.Phone = localStorage.getItem("userPhone");
      }
      this.$api.mine.getUserInfo(data).then(res=> {
        if(res.IsSuccess){
          if(res.Data.isComplete){
          this.name = res.Data.UserName; 
          this.integral = res.Data.Integral; 
          this.UserNumber = res.Data.UserNumber; 
          if(res.Data.HeadUrl){
            this.HeadUrl = res.Data.HeadUrl;
          }else{
             this.HeadUrl = userimg
          }
          localStorage.setItem("userInfo", JSON.stringify(res.Data));
          let redirect = sessionStorage.getItem('redirect');
          if(redirect){
            window.location.href= redirect;
            sessionStorage.removeItem('redirect')
          }
          }else{
            setTimeout(()=>{
              this.$router.push({
                path: '/myInfo',
              });
              this.$toast('信息不完整，请补全信息');
            },1000)
          } 
        }else{
          localStorage.clear();
          this.$toast('会话已失效，请退出，重新进入');
        }
        
      })    
    },
    getWeiXinUserInfo(){
      this.$api.mine.getWeiXinUserInfo({   
          code: this.code,
          userType: this.userType
      }).then(res=> {
        console.log(res);
        sessionStorage.setItem('code','used');
        this.OpenId = res.Data.openid;
        this.name = res.Data.nickname; 
        this.integral = res.Data.Integral; 
        if(res.Data.headimgurl){
          this.HeadUrl = res.Data.headimgurl;
        }else{
          this.HeadUrl = userimg
        }
        this.login()
      })    
    },
    getComWeiXinInfo(){
      this.$api.mine.getComWeiXinInfo({   
          code: this.code,
          userType: this.userType
      }).then(res=> {
        console.log(res);
        console.log('openid:'+res.Data.userInfoDto.OpenId);
        let data = res.Data;
        sessionStorage.setItem('code','used');
        if(data.isRegister){
          if(data.userInfoDto.AuditStatus == 0){
            this.isHidden = true;
            this.$toast('正在审核中，请等待审核通过');
            this.$router.push({
                path: '/login',
                query:{userType:this.userType}
            })
          }else{
            let registered = this.getUrlParam('state'); // 店家从注册点击进入的标识

            if(registered == 'registered'){
              this.$dialog.confirm({
                title: '提示',
                message: '当前微信已注册，是否登录？'
              }).then(() => {
                // on confirm
                this.OpenId = data.wXOAuthUserInfo.openid;
                this.login()
              }).catch(() => {
                // on cancel
                localStorage.clear();
                this.$router.push({
                  path: '/login',
                  query:{userType:this.userType}
                })
              });
            }else{
              this.OpenId = data.wXOAuthUserInfo.openid;
              this.login()
            }
          }
        }else{
          localStorage.removeItem('authorization');
          this.$router.push({
            path: '/shopRegistered',
            query:{openId:data.wXOAuthUserInfo.openid}
          })
        }
      })    
    },
    getCompanyUserInfo(){
      this.$api.mine.getCompanyUserInfo().then(res=> {
        if(res.IsSuccess){
          this.isHidden = false;
          this.companyUserInfo = res.Data;
          if(res.Data.HeadUrl){
            this.HeadUrl = res.Data.HeadUrl;
          }else{
            this.HeadUrl = userimg
          }
          localStorage.setItem("userInfo", JSON.stringify(res.Data));
        }
      })    
    },
    logout(){
      this.$dialog.confirm({
        title: '提示',
        message: '是否退出登录'
      }).then(() => {
        // on confirm
        localStorage.clear();
        this.$router.push({
          path: '/login',
          query:{userType:this.userType}
        })
      }).catch(() => {
        // on cancel
      });
    },
    getUrlParam(name){  
      //构造一个含有目标参数的正则表达式对象  
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  
      //匹配目标参数  
      var r = window.location.search.substr(1).match(reg);  
      //返回参数值  
      if (r!=null) return unescape(r[2]);  
      return null;  
    },
    login(){
      this.$api.login.userLogin({   
          OpenId: this.OpenId,
          UserType:this.userType 
      }).then(res=> {
        if(res.IsSuccess){
          this.isHidden = false;
          localStorage.removeItem("authorization");
          localStorage.setItem("authorization",res.Data);
          if(this.userType == 0){
            this.getUserInfo();
          }else{
            this.getCompanyUserInfo()
          }
        }else{
          if(this.userType == 1){
            localStorage.clear();
            this.$router.push({
                path: '/login',
                query:{userType:this.userType}
            })
          }else{
            localStorage.clear();
            this.$toast('登录失败，请退出，重新进入');
          }
        }
      }).catch(() => {
        // on cancel
      });  
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.isHidden {
  display: none;
}
.mine {
  background-color: #f8f8f8;
}
.user-menu{
  font-size: .373333rem;
  padding: .533333rem .8rem;
  .mune-item{
    width: 50%;
    color: #a3a3a3;
    margin-top: .533333rem;
    margin-bottom: .533333rem;
  }
  .mune-item .flex{
    padding-left: .266667rem;
  }
  .menu-name{
    margin-left: .213333rem;
  }
  .menu-icon{
    width: 1.2rem;
    height: 1.2rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .my-info{
      background-image: url('../../assets/V_19.jpg');
    }
  .password{
      background-image: url('../../assets/V_16.jpg');
    }
  .mall-coupon{
     background-image: url('../../assets/V_27.jpg');
  }
  .shop-coupon{
     background-image: url('../../assets/V_24.jpg');
  }
  .jfhs{
     background-image: url('../../assets/V_35.jpg');
  }
  .jfjl{
     background-image: url('../../assets/V_32.jpg');
  }
  .focus-shop{
     background-image: url('../../assets/V_40.jpg');
  }
}
.mine-personal {
  background-color: #fff;
  background-image: url('../../assets/V_01.jpg');
  background-size: cover;
  padding: .8rem .533333rem;
  .mine-personal-main{
    background-color: #fff;
    height: 100%;
    border-radius: .4rem;
    box-shadow: .08rem .08rem .106667rem #aaa;
    padding: .533333rem;
    .main-right{
      width: 2.4rem;
      padding-left: .133333rem;
    }
    .loginout{
      border-radius: .266667rem;
      color: #aaa;
      border-color: #bbb;
    }
    .card-type{
      font-size: .48rem;
      color:#bc9106;
    }
    .user-pic-div{
      flex: 0 0 1.8rem;
      .user-pic {
        border: 1px solid #bc9106;
        border-radius: .213333rem;
        width: 1.8rem;
        height: 1.8rem;
      }
     
    }
    .user-info{
      margin-top: .266667rem;
      color: #979797;
      .user-info-row{
        padding-left: .266667rem;
        min-width: 0;
      }
       .user-integral{
        font-size: .373333rem;
        .sorce{
          color: #bc9106;
          font-weight: bold;
        }
      }
      .user-name{
        font-size: .48rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .user-number{
        font-size: .373333rem;
      }
      
    }
  }
  .company-logo{
        width: 1.8rem;
        height: 1.8rem;
      }
  .img-row {
    width: 2rem;
    .user-pic {
      border-radius: .213333rem;
      width: 1.6rem;
      height: 1.6rem;
    }
  }
  .user-phone {
    font-size: .48rem;
    color: #333;
    font-weight: bold;
  }
  .user-number{
    font-size: .373333rem;
    margin-bottom: .133333rem;
  }
  .user-sorce {
    font-size: .373333rem;
    color:#666;
    .sorce {
      font-size: .48rem;
    }
  }
  .user-address{
    font-size: .32rem;
    color: #666;
    margin-top: .08rem;
  }
}
.mine-list {
  margin-top: .533333rem;
}
</style>